<!--
 以下为演示代码
 * @作者：rocyuan（袁鹏）
 * @邮箱：rocyuan666@163.com
 * @微信：rocyuan666
 * @个人网站：https://rocyuan666.github.io
-->
<template>
  <view class="content">
    <roc-navbar title="roc-cli" :autoBack="false"></roc-navbar>
    <!-- 内容 -->
    <view class="u-p-20 cont-wrap">
      <view class="roc-cli-info">
        <u-avatar size="100" src="/static/img/roc.jpg"></u-avatar>
        <view class="title">roc-cli</view>
      </view>
    </view>
    <view>vuex示例：</view>
    <u-button type="primary" @click="login">1秒后储存token（刷新依旧存在）</u-button>
    <view>vuex中储存token：{{ token }}</view>
    <u-button type="primary" @click="logOut">1秒后删除token</u-button>
    <view>接口调用示例：</view>
    <u-button type="primary" @click="handleLogin">登录</u-button>
    <view>路由拦截示例(拦截必须使用$u.route进行页面转跳操作)：</view>
    <u-button type="primary" @click="handleToPage">转跳到/pages/page/page</u-button>
  </view>
</template>

<script>
import { asyncTasks } from 'roc-utils'
import { mapActions, mapGetters } from 'vuex'
import { login } from '@/api/login.js'

export default {
  data() {
    return {
      banner: [],
    }
  },
  computed: {
    ...mapGetters(['token']),
  },
  methods: {
    ...mapActions({
      login: 'user/Login',
      logOut: 'user/LogOut',
    }),
    async handleLogin() {
      const [err, res] = await asyncTasks(login())
      if (err) return console.error(err)
      console.log(res)
    },
    handleToPage() {
      this.$u.route('/pages/page/page')
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  .cont-wrap {
    margin-top: 50px;
    .roc-cli-info {
      display: flex;
      align-items: center;
      flex-direction: column;
      padding-bottom: 10px;
      .title {
        font-size: 20px;
        margin-top: 10px;
      }
    }
  }
}
</style>
